<ng-template #ItemTemplate let-item="item" let-config="config" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange">
  <div class="treeview-node">
    <span class="tree-switcher" (click)="onCollapseExpand()" [ngClass]="{
      'cursor-pointer': item.children
    }">
      <i class="anticon anticon-caret-right" [ngClass]="{
        'tree-switcher_close': item.collapsed,
        'tree-switcher_open': !item.collapsed
      }" *ngIf="item.children" aria-hidden="true"></i>
    </span>
    <span class="tree-checkbox" *ngIf="config.hasCheckBox">
      <label nz-checkbox [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [nzIndeterminate]="item.indeterminate" [nzDisabled]="item.disabled"></label>
    </span>
    <span class="tree-node-content-wrapper" [title]="item.text">{{item.text}}</span>
    <span class="tree-node-added" *ngIf="!item.children && added.indexOf(item.value.id) > -1">
      <nz-tooltip [nzTitle]="'已添加'"><i class="anticon anticon-check-circle-o" nz-tooltip></i></nz-tooltip>
    </span>
    <span class="tree-node-add-button" *ngIf="!item.children && added.indexOf(item.value.id) === -1" (click)="onPlus(item)">
      <nz-tooltip [nzTitle]="(item.value && item.value.isTableData) ? '添加到数据' : '添加到图层'"><i class="anticon anticon-plus" nz-tooltip></i></nz-tooltip>
    </span>
    <span class="tree-node-menu" *ngIf="!item.children">
      <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
        <span class="dropdown-link" nz-dropdown><i class="anticon anticon-ellipsis"></i></span>
        <ul nz-menu> 
          <li nz-menu-item nzDisable *ngIf="(item.value && item.value.isTableData) || added.indexOf(item.value.id) > -1">添加到图层</li>
          <li nz-menu-item *ngIf="item.value && item.value.isTableData && added.indexOf(item.value.id) === -1" (click)="onPlus(item)">添加到数据</li>
          <li nz-menu-item *ngIf="item.value && !item.value.isTableData && added.indexOf(item.value.id) === -1" (click)="onPlus(item)">添加到图层</li>
          <li nz-menu-item nzDisable *ngIf="(item.value && !item.value.isTableData) || added.indexOf(item.value.id) > -1">添加到数据</li>
        </ul>
      </nz-dropdown>
    </span>
    <span class="tree-node-menu" *ngIf="item.children">
      <nz-dropdown [nzTrigger]="'click'" [nzPlacement]="'bottomRight'">
        <span class="dropdown-link" nz-dropdown><i class="anticon anticon-ellipsis"></i></span>
        <ul nz-menu>
          <li nz-menu-item (click)="onPushGroup(item)">添加到图层</li>
          <li nz-menu-divider></li>
          <li nz-menu-item (click)="onCollapseExpand()">{{item.collapsed ? '展开节点' : '折叠节点'}}</li>
        </ul>
      </nz-dropdown>
    </span>
  </div>
</ng-template>

<ng-template #headerTemplate let-config="config" let-item="item" let-onCollapseExpand="onCollapseExpand" let-onCheckedChange="onCheckedChange"
  let-onFilterTextChange="onFilterTextChange">
  <div *ngIf="config.hasFilter" class="filter-container">
    <input class="filter-form-control" type="text" [placeholder]="'输入关键字'" [(ngModel)]="filterText" (ngModelChange)="onFilterTextChange($event)" />
    <span class="filter-button">
      <i class="anticon anticon-search"></i>
    </span>
  </div>
  <div *ngIf="hasFilterItems">
    <div *ngIf="config.hasAllCheckBox || config.hasCollapseExpand" class="row row-all">
      <div class="col-12">
        <div class="form-check">
          <input type="checkbox" class="form-check-input" [(ngModel)]="item.checked" (ngModelChange)="onCheckedChange()" [indeterminate]="item.indeterminate"
          />
          <label *ngIf="config.hasAllCheckBox" class="form-check-label" (click)="item.checked = !item.checked; onCheckedChange()">无相关资源</label>
          <label *ngIf="config.hasCollapseExpand" class="pull-right form-check-label" (click)="onCollapseExpand()">
            <i [title]="i18n.getTooltipCollapseExpandText(item.collapsed)" aria-hidden="true" class="anticon" [class.anticon-arrows-alt]="item.collapsed"
              [class.anticon-shrink]="!item.collapsed"></i>
          </label>
        </div>
      </div>
    </div>
    <div *ngIf="config.hasDivider" class="dropdown-divider"></div>
  </div>
</ng-template>



<div class="resource-tree" (click)="onClickRoot($event)">
  <ul class="resource-tree-tabs-nav" #tabsNavs>
    <li>工勘数据</li>
    <li>我的数据</li>
    <li>公共资源</li>
  </ul>
  <div class="resource-tree-container">
    <div class="resource-tree-tabs-content" #tabsContent>
      <div class="resource-tree-tabs-tabpane">
        <treeview
          [items]="professional$ | async" 
          [config]="treeviewConfig" 
          [itemTemplate]="ItemTemplate" 
          [headerTemplate]="headerTemplate" 
          (plus)="onPlus($event)"
        ></treeview>
      </div>
      <div class="resource-tree-tabs-tabpane own-resource">
        <div class="treeview-content">
          <treeview
          [items]="own$ | async" 
          [config]="treeviewConfig" 
          [itemTemplate]="ItemTemplate" 
          [headerTemplate]="headerTemplate" 
          (plus)="onPlus($event)"
        ></treeview>
        </div>
        <div class="bottom-button-container">
          <button nz-button nzType="primary" [nzSize]="'large'">导入数据</button>
        </div>
      </div>
      <div class="resource-tree-tabs-tabpane">
        <treeview
          [items]="public$ | async" 
          [config]="treeviewConfig" 
          [itemTemplate]="ItemTemplate" 
          [headerTemplate]="headerTemplate" 
          (plus)="onPlus($event)"
        ></treeview>
      </div>
    </div>
  </div>
  <button class="collapse-button" (click)="onCollapse()"><i class="anticon anticon-right"></i></button>

  <ng-container [ngSwitch]="messages">
    <div class="resource-push-message-mask" [ngClass]="{ 'has-message': messages === 'pushing' }" *ngSwitchCase="'pushing'"></div>
    <div class="resource-push-message pushing" [ngClass]="{ 'has-message': messages === 'pushing' }" *ngSwitchCase="'pushing'">
      <i class="anticon anticon-loading anticon-spin"></i>
      <span>正在添加到图层</span>
    </div>
    <div class="resource-push-message pushed" [ngClass]="{ 'has-message': messages === 'pushed' }" *ngSwitchCase="'pushed'">
      <i class="anticon anticon-smile-o"></i>
      <span>添加成功！</span>
    </div>
    <div class="resource-push-message push-error" [ngClass]="{ 'has-message': messages === 'error' }" *ngSwitchCase="'error'">
      <i class="anticon anticon-frown-o"></i>
      <span>添加失败！</span>
    </div>
  </ng-container>

</div>